<script setup>
import {ref} from "vue";
import axios from "axios";

//搜索的用户ID
const userId = ref("");
//定义流水表格的引用
const userAmountRecordTableRef = ref();
//选择的当前流水
const currentuserAmountRecord = ref({});
//存储
const userAmountRecord=ref({
  records:[]
});
//藏品相关数据加载中
const goodsPageLoading = ref(true);
//当前页码
const goodsPageIndex = ref(1);
const headers = {
  Authorization: localStorage.getItem("auth")
}
//从接口获取商品分页数据
const getGoodsPage = () => {
  goodsPageLoading.value = true;
  axios.post("/api/useramountrecord", {
    pageIndex: goodsPageIndex.value,
    pageSize: 8,
    userId:userId.value
  }, {
    headers
  }).then(response => {
    console.log("获取成功");
    userAmountRecord.value = response.data.value;  //将从接口获取到的数据，赋值给goodsPage对象
    goodsPageLoading.value = false;
  }).catch(error => {
    console.log("获取失败", error.response);
    goodsPageLoading.value = false;
  })
}

getGoodsPage();





//表示单击行
const handleRowClick = row => {
  userAmountRecordTableRef.value.data.forEach(r => {
    userAmountRecordTableRef.value.toggleRowSelection(r, r.id == row.id);
  })
  currentuserAmountRecord.value = row;
}
//选择数据key集合
const multipleSelection = ref([]);
const handleSelectionChange = val => {
  multipleSelection.value = val;
  if (multipleSelection.value.length == 1) {
    currentuserAmountRecord.value = multipleSelection.value[0];
  } else {
    currentuserAmountRecord.value = {};
  }
}

</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item>订单中心</el-breadcrumb-item>
    <el-breadcrumb-item>用户流水</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="view">
    <div class="vHead">
      <div class="vHLeft">
        <el-input v-model="userId" placeholder="用户Id" style="width:160px" />&nbsp;&nbsp;
        <el-button type="primary" @click="getGoodsPage">搜索</el-button><el-divider border-style="double" />
      </div>
      <div>

      </div>
    </div>
    <div>
      <el-table :data="userAmountRecord.records"
                v-loading="goodsPageLoading"
                row-key="id"
                ref="userAmountRecordTableRef"
                @current-change="handleRowClick"
                @selection-change="handleSelectionChange"
                stripe
                highlight-current-row
                empty-text="暂无数据"
                style="width: 100%">
        <el-table-column type="selection" width="55" />
      <el-table-column prop="userId" label="用户ID" />
      <el-table-column prop="name" label="藏品名称" />
      <el-table-column prop="orderformId" label="订单编号" />
      <el-table-column prop="amount" label="金额" />
      <el-table-column prop="createTime" label="发生时间" />
<!--        <el-table-column prop="direction" label="状态" />-->
      </el-table>
      <el-pagination background layout="prev, pager, next"
                     :default-page-size="userAmountRecord.pageSize"
                     :total="userAmountRecord.total"
                     v-model:current-page="goodsPageIndex"
                     @current-change="getGoodsPage"
      />
    </div>
  </div>
</template>

<style scoped>

</style>